<template>
<div >
  <!-- <div >
  <app-logo/>
   <h1>功能grid</h1>
   <ul>
     <li v-for="user in async_data.userinfo" :key="user.id">
       {{user}}
     </li>
   </ul> 
  </div> -->
    <div class="icon_grid" >
      <div v-for="n in 7" :key="n" @click="go_module(n)" >
        <i class='iconfont icon-biaoxing'/>
        <span>{{n}}功能名</span>
      </div>
    </div>
    <mt-cell title="无限滚动加载"  ></mt-cell>
    <ul v-infinite-scroll="loadMore"
       infinite-scroll-immediate-check = "false"
       infinite-scroll-disabled="loading"
       infinite-scroll-distance="20" class="mainlist" >
    <li v-for="item in list_data" :key="item" class="item" @click="on_tap(item)">
     <img src="/img/s1-2.jpg"  >
     <div class="contant">
       <div class="item-title">{{ item }}</div>
       <div class="item-sub-title">副标题</div>  
       <div class="item-comment">评论</div>  
     </div> 
    </li>
    <li >加载更多<mt-spinner type="triple-bounce" ></mt-spinner></li>
   </ul>
</div>
</template>


<style>
.mainlist {
  list-style-type: none;
  -webkit-padding-start: 10px;
  /* overflow-y: auto; */
  /* height: 300px; */
}
.item {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  line-height: 30px;
  text-align: initial;
}

.item img {
  flex: 1;
  margin: 5px;
  border-radius: 5px;
}
.item .contant {
  flex: 5;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.item-title {
  flex: 3;
  font-size: 1.1em;
  font-weight: bold;
}
.item-sub-title {
  flex: 1;
  font-size: 0.8em;
}
.item-comment {
  flex: 1;
  font-size: 0.8em;
}
.mint-cell{
  background-color: #26a2ff;
  font-weight: bolder;
  color: white;
}
.icon_grid{
  display: flex;
  flex-flow:row wrap;
  align-content: center;
  padding:10px 0px 10px 0px;
}
.icon_grid div{
  flex: 1 0 80px;
  display: flex;
  flex-flow: column nowrap;
  align-items:center;
}
.icon_grid i{
  width: 50px;
  line-height: 50px;
  font-size: 40px;
  background-color: aqua;
  color: white;
  border-radius: 25%;
}
.icon_grid span{
  line-height: 30px;
}
</style>

<script>
// import AppLogo from "~/components/AppLogo.vue";
let listdata = []
export default {
  layout: "mobile",
  components: {
    // AppLogo
  },
  data() {
    return {
      list_data: listdata,
      loading: false
    };
  },
  async asyncData({ app }) {
    //  return  await app.$axios.get("/api/User").then(
    //    (res)=> {
    //     // alert(JSON.stringify(res.data))
    //      return {async_data: res.data}
    //    });
  },

  created: function() {
    if(this.list_data.length==0)
    for (var i = 1; i < 15; i++) this.list_data.push("title" + parseInt(i));
  },
  methods: {
    loadMore: function() {
      var _self = this;
      _self.loading = true;
      var len = _self.list_data.length;
      setTimeout(function() {
        for (var i = 1; i < 5; i++) {
          _self.list_data.push("new" + parseInt(len + i));
        }
        _self.loading = false;
      }, 2500);
    },
    on_tap(data) {
      alert(data);
    },
    go_module(data){
      alert('go to module '+data)
    }
  }
};
</script>
